// 整车转料组件,注意要用反引号
Vue.component('whole-tran-dialog', {
    template: `
       <el-dialog title="整车转料" :visible.sync="tranDialog.show" width="95%" center v-loading="tranDialog.loading"
                   :close-on-click-modal="0" :show-close="0" custom-class="whole-tran-dialog">
            <el-form label-position="right" label-width="140px" :inline="true" :model="tranForm"
                     :rules="tranRules" ref="tranForm">
                <indent-select @change="indentChange" v-if="tranDialog.show"></indent-select>
                <!--  需要录入的信息  -->
                <!--<el-form-item label="是否累计" required prop="render.isAdd">
                    <el-radio-group v-model="tranForm.render.isAdd">
                        <el-radio label="0">累计</el-radio>
                        <el-radio label="1">不累计</el-radio>
                    </el-radio-group>
                </el-form-item>-->
                <!--<el-form-item label="是否过磅称重" required prop="render.isWeight">
                    <el-radio-group v-model="tranForm.render.isWeight">
                        <el-radio label="0">需要</el-radio>
                        <el-radio label="1">不需要</el-radio>
                    </el-radio-group>
                </el-form-item>-->
                 <el-form-item  label="新车发货方量" required>
                    <el-input v-model="tranForm.render.targetSendStere" type="number" @change="wtSendStereChange"></el-input>
                </el-form-item>
                 <el-form-item label="新车累计车次" required>
                    <el-input v-model="tranForm.render.totalCar" type="number"></el-input>
                </el-form-item>
                <el-form-item label="新车累计方量" required>
                    <el-input v-model="tranForm.render.totalStere" type="number"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="原发货单是否作废" required prop="render.isAdd" label-width="auto">
                    <el-radio-group v-model="tranForm.render.isAdd">
                        <el-radio label="0">不作废</el-radio>
                        <el-radio label="1">作废</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否计算运输方量" required prop="render.calcTranStere">
                    <el-radio-group v-model="tranForm.render.calcTranStere">
                        <el-radio label="0">计算</el-radio>
                        <el-radio label="1">不计算</el-radio>
                    </el-radio-group>
                </el-form-item>
                <br>
                <el-form-item label="退料类型" required prop="render.backType">
                    <el-select v-model="tranForm.render.backType" filterable clearable placeholder="退料类型"
                               value-key="id">
                        <el-option v-for="item in backTypeList"
                                   :key="item.code"
                                   :label="item.desc"
                                   :value="item.code + ''">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="票据类型">
                    <el-select v-model="tranForm.render.receiptType" filterable clearable placeholder="票据类型"
                               value-key="id">
                        <el-option v-for="item in receiptTypeList"
                                   :key="item.code"
                                   :label="item.desc"
                                   :value="item.code + ''">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="特殊结算类型">
                    <el-select v-model="tranForm.render.specialClearType" filterable clearable placeholder="特殊结算类型"
                               value-key="id">
                        <el-option v-for="item in specialClearTypeList"
                                   :key="item.code"
                                   :label="item.desc"
                                   :value="item.code + ''">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="道路类型">
                    <el-select v-model="tranForm.render.roadType" filterable clearable placeholder="道路类型"
                               value-key="id">
                        <el-option v-for="item in roadTypeList"
                                   :key="item.code"
                                   :label="item.desc"
                                   :value="item.code + ''">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="转料备注" required class="invoice-remark">
                    <el-input type="textarea" :rows="2" v-model="tranForm.render.operateRemark"></el-input>
                </el-form-item>
                <el-form-item label="发货单备注" class="invoice-remark">
                    <el-input type="textarea" :rows="2" v-model="tranForm.render.remark"></el-input>
                </el-form-item>
                <el-form-item label="发货单运输备注" class="invoice-remark">
                    <el-input type="textarea" :rows="2" v-model="tranForm.render.tranRemark"></el-input>
                </el-form-item>
                <el-form-item label="发货单泵送备注" class="invoice-remark">
                    <el-input type="textarea" :rows="2" v-model="tranForm.render.pumpRemark"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onTranSubmit('tranForm')">确定</el-button>
                <el-button @click="cancel('tranDialog')">取 消</el-button>
            </div>
        </el-dialog>
      `,
    props: {
        sourceInvoice: {
            type: Object,
            //  当参数是对象时,需要默认数据
            default: function () {
                let inv = {
                    id: null,
                    code: "",
                    targetSendStere: 0,
                };
                return inv;
            }
        },
    },
    data() {
        return {
            //  任务单搜索框
            dialogSearch: {
                conName: null,
                site: null,
                loading: null,
            },
            //  任务单的泵送设备
            indentPumpDevs: [],
            //  任务单列表
            indentList: [],
            //  票据类型
            receiptTypeList: [],
            //  特殊结算类型
            specialClearTypeList: [],
            //  道路类型
            roadTypeList: [],
            //  退料类型
            backTypeList: [{
                code: 0,
                desc: "站内退回"
            }, {
                code: 1,
                desc: "站外退回"
            }],
            //  转料操作-弹窗
            tranDialog: {
                show: true,
                loading: false,
            },
            //  转料操作-表单数据
            tranForm: {
                id: null,
                indentPopover: false,
                render: {
                    backType: "0",
                    indentId: null,
                    isAdd: "1",
                    isWeight: "0",
                    calcTranStere: "1",
                    receiptType: null,
                    specialClearType: null,
                    roadType: null,
                    remark: null,
                    tranRemark: null,
                    pumpRemark: null,
                    operateRemark: null,
                    //  新车发货方量
                    targetSendStere: null,
                    totalCar: 0,
                    totalStere: 0,
                },
                //  仅用于展示的数据
                exhibition: {
                    conName: null,
                    clientName: null,
                    builder: null,
                    site: null,
                    strengthName: null,
                    slumps: null,
                    tech: null,
                    castModelName: null,
                    indentCode: null,
                    totalStere: 0,
                },
            },
            //  转料验证操作
            tranRules: {
                //  上传数据
                render: {
                    indentId: [
                        {required: true, message: '请选择任务单', trigger: 'blur'},
                    ],
                    isAdd: [
                        {required: true, message: '请选择是否累计', trigger: 'blur'},
                    ],
                    isWeight: [
                        {required: true, message: '请选择是否过磅称重', trigger: 'blur'},
                    ],
                    dispatcherName: [
                        {required: true, message: '请选择调度员', trigger: 'blur'},
                    ],
                    mixUserName: [
                        {required: true, message: '请选择拌台操作员', trigger: 'blur'},
                    ],
                    carId: [
                        {required: true, message: '请选择运输车辆', trigger: 'blur'},
                    ],
                    calcTranStere: [
                        {required: true, message: '请选择是否计算运输方量', trigger: 'blur'},
                    ],
                    backType: [
                        {required: true, message: '请选择退料类型', trigger: 'blur'},
                    ]
                },
            },
        };
    },
    created() {
        let that = this;
        that.tranForm.id = that.sourceInvoice.id;
        that.tranForm.render.targetSendStere = that.sourceInvoice.sendStere;
        that.loadBaseDatas();
    },
    methods: {
        //  加载各个基础数据
        loadBaseDatas() {
            let that = this;
            $.ajax({
                type: "POST",
                url: "/pro/invoice/base/datas",
                async: true,
                dataType: 'json',
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        let map = res.data;
                        // that.createTypeList = map.createTypeList;
                        that.invoiceTypeList = map.invoiceTypeList;
                        that.receiptTypeList = map.receiptTypeList;
                        that.specialClearTypeList = map.specialClearTypeList;
                        that.roadTypeList = map.roadTypeList;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询泵送设备失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.tableLoading = false;
                }
            })
        },
        //  整车转料提交
        onTranSubmit(formName) {
            let that = this;
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    //  验证成功
                    that.tranDialog.loading = true;
                    $.ajax({
                        type: "PUT",
                        url: "/pro/invoice/tran/own/" + that.tranForm.id,
                        async: true,
                        dataType: 'json',
                        data: that.tranForm.render,
                        success: function (res) {
                            if (res.code == 0) {
                                that.$message({
                                    showClose: true,
                                    message: '操作成功',
                                    type: 'success'
                                });
                                //  回调
                                that.cancel();
                            } else {
                                that.$message({
                                    showClose: true,
                                    message: '保存失败：' + res.msg,
                                    type: 'error'
                                });
                            }
                        },
                        error: function (res) {
                            that.$message({
                                showClose: true,
                                message: '请求失败，请联系管理员',
                                type: 'error'
                            });
                            return;
                        },
                        complete: function (XMLHttpRequest, status) {
                            that.tranDialog.loading = false;
                        }
                    })
                } else {
                    that.$message({
                        showClose: true,
                        message: '验证表单失败.',
                        type: 'error'
                    });
                    return false;
                }
            });
        },
        indentChange(indentId) {
            let that = this;
            that.tranForm.render.indentId = indentId;
            $.ajax({
                type: "POST",
                url: "/pro/indent/queryTotal",
                async: true,
                dataType: 'json',
                data: {
                    indentId: indentId,
                },
                success: function (res) {
                    if (res.code == 0) {
                        let totalData = res.data;
                        let totalCar = totalData.totalCar;
                        //  累计车次默认+1
                        totalCar = parseInt(totalCar) + 1;
                        that.tranForm.render.totalCar = totalCar;
                        //  任务单的最大累计车次
                        let totalStere = totalData.totalStere;
                        that.tranForm.exhibition.totalStere = totalStere;
                        //
                        let tempStere = that.tranForm.render.targetSendStere;
                        that.tranForm.render.totalStere = parseFloat(totalStere) + parseFloat(tempStere);
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询任务单累计数据失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.dialog.loading = false;
                }
            })
        },
        //  发货方量变更
        wtSendStereChange() {
            let that = this;
            //  发货方量
            let sendStere = that.tranForm.render.sendStere;
            //  累计方量
            let oldStere = that.tranForm.exhibition.totalStere;
            let newTotalStere = parseFloat(sendStere) + parseFloat(oldStere);
            that.tranForm.render.totalStere = newTotalStere;
        },
        //  取消添加
        cancel() {
            let that = this;
            Object.keys(that.tranForm.render).forEach(key => {
                that.tranForm.render[key] = null;
            });
            Object.keys(that.tranForm.exhibition).forEach(key => {
                that.tranForm.exhibition[key] = null;
            });
            //  调用父级的关闭弹窗
            this.$emit("closed")
        },
    }
});

// 创建 Vue 实例
new Vue({
    el: '#app',
    data() {
        return {};
    }
});
